<template>
  <div class="conner">
    <div class="login-wrap">
      <div class="ms-login">
        <div class="img_logo_box">
          <img
            src="../../assets/logo.png"
            alt="爱氏妈妈"
            style="width: 100%; height: 100%"
          />
        </div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            用户名：
            <el-input
              v-model.trim="ruleForm.username"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" style="position: relative">
            密码：
            <el-input
              show-password
              placeholder="请输入密码"
              v-model.trim="ruleForm.password"
              @keyup.enter.native="submitForm('ruleForm')"
            ></el-input>
            <span
              style="
                position: absolute;
                bottom: -24px;
                display: block;
                right: 4px;
              "
              ><el-link type="warning" @click="ForgotPassword"
                >忘记密码</el-link
              ></span
            >
          </el-form-item>
          <el-form-item prop="verifyCode" class="verifyCodeItemCss">
            <div>验证码</div>
            <el-input
              class="verify_css"
              placeholder="请输入4位验证码"
              v-model.trim="ruleForm.verifyCode"
              @keyup.enter.native="submitForm('ruleForm')"
            ></el-input>
            <div id="v_container"></div>
          </el-form-item>
          <div class="login-btn">
            <el-button
              class="loginBtn"
              type="primary"
              @click="submitForm('ruleForm')"
              >登录</el-button
            >
          </div>
        </el-form>
        <p style="text-align: center; margin-top: 28px; font-size: 12px">
          温馨提示： 首次登录记得修改密码哦
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { GVerify } from "../../utils/GVerify";
import { login } from "@/request/index";
export default {
  data: function () {
    return {
      ruleForm: {
        username: "demo",
        password: "12345678",
        verifyCode: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      verifyCode: null,
    };
  },
  mounted() {
   
    // 随机播放帧数
    // this.videoCut();
    this.verifyCode = new GVerify("v_container");
    //  console.log(this.verifyCode,'99999');
    // this.verifyCode = new GVerify("v_container");
    setTimeout(() => {
        this.verifyCode
    }, 1000);
  },
  activated() {},
  methods: {
    // 忘记密码
    ForgotPassword() {
      this.$router.push("/ForgotPassword");
    },
    submitForm(formName) {
      var isCode = null;
      var that = this;
      const { username, password } = that.ruleForm;
      // 获取验证码
      var verifyCode = this.ruleForm.verifyCode;
      var verifyFlag = this.verifyCode.validate(verifyCode);
      console.log(verifyCode);
      if (!verifyFlag) {
        // that.$message.error("验证码错误");
        isCode = false;
      } else {
        // this.$message.success("成功");
        isCode = true;
      }

      this.$refs[formName].validate(function (valid) {
        if (valid && isCode) {
          login(username, password).then((res) => {
            if (res.code != "0000") {
              that.$message.error(res.msg);
              return setTimeout(() => {
                location.reload();
              }, 400);
            }
            console.log(JSON.stringify(res.data[0].role));
            that.$message.success(res.msg);

            window.sessionStorage.setItem("name", username);
            window.sessionStorage.setItem("password", password);
            window.sessionStorage.setItem("id", res.data[0].manager_id);
            window.sessionStorage.setItem(
              "role",
              JSON.stringify(res.data[0].role)
            );

            that.$router.push("/userManagement");
          });
        } else {
          that.$message.error("验证码错误");

          return setTimeout(() => {
            location.reload();
          }, 400);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.conner {
  margin-top: 10%;
  // padding-left: 10%;
  box-sizing: border-box;
}
.verify_css {
  // width: 45%;
  position: relative;
}

.login-wrap {
  width: 100%;
  height: 100%;
}
.ms-title {
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  color: #fff;
}

.ms-login {
  // width: 300px;
  // height: 225px;
  /* background: #111; */
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
}

.loginBtn:hover {
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3),
    0px 0px 20px rgba(0, 0, 0, 0.1) inset;
}

#v_container {
  width: auto;
  height: auto;
  display: inline-flex;
  position: absolute;
  right: 2px;
  top: 30px;
}
#verifyCanvas {
  width: 180px !important;
  height: 30px !important;
}
::v-deep .el-button--primary {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
  background-image: linear-gradient(to left, #ff792c, #e04e2d);
  border-radius: 20px;

  &:hover {
    background-color: transparent;
    border-color: transparent;
    background-image: linear-gradient(to left, #ff792c, #e04e2d);
  }
}
::v-deep .el-form-item__content {
  line-height: 19px;
  position: relative;
  font-size: 14px;
}
::v-deep .el-link.el-link--warning {
  color: #ff792c;
  &.el-link.el-link--warning:hover {
    color: #ff792c;
  }
}
.img_logo_box {
  width: 190px;
  height: 25px;
  margin: 0 auto 20px;
}
</style>
